<template>
  <div class="title">
    <div class="head">
      <slot name="head" />
    </div>
    <div class="main">
      <slot />
    </div>
    <div class="foot">
      <slot name="foot" />
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Title",
};
</script>

<style lang="scss" scoped>
@import '../util/util.scss';
.title {
  color: white;
  width: 100vw;
  position: relative;
  text-align: center;
  background-color: rgb(36,156,144);
  height: pxW(45);
  line-height: pxW(45);
  padding: pxW(15) 0;
  font-size: pxW(45);
  .head {
    position: absolute;
    text-align: center;
    width: 30%;
    overflow: hidden;
    left: 0;
  }
  .foot {
    position: absolute;
    text-align: center;
    width: 30%;
    overflow: hidden;
    right: 0;
  }
}
</style>